<script setup>

  import echarts from "echarts";
  import {reactive} from "vue";
  import xx from "@/axios/xx";
  import {ElMessage} from "element-plus";

  const info = reactive({
    list:[],//产品所有信息数据
    nameList:[],//产品名列表
    interestRateList:[]//利率列表
  })

  xx.get('/loanProduct/queryAll').then(res => {
    if (res.code === 200) {
      info.list = res.data
      for(let i=0;i<info.list.length; i++) {
        info.nameList[i] = info.list[i].productName;
        info.interestRateList[i] = info.list[i].interestRate;
      }
      console.log(info.nameList)
      console.log(info.interestRateList)

      let echarts = require('echarts')
      let char1 = echarts.init(document.getElementById('char1'));
      char1.setOption({
        title: {
          text: '产品利率对比图'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis:{
          type:'category',
          data:info.nameList
        },
        yAxis:{
          name:'利率',
          type:'value'
        },
        series: {
          type: 'line',
          stack: 'Total',
          data: info.interestRateList,
        }

      })
    }
    else {
      ElMessage.error(res.message)
    }

  })

</script>

<template>
  <div style="width: calc(100vw - 221);display: flex">
    <div id="char1" style="width: 100%;height:400px;display: flex;border: 1px solid #ccc">
    </div>
  </div>

</template>

<style scoped>

</style>